<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/public.css"/>
<title>无标题文档</title>
	<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div>
    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
  <div class="container container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="index.html">首页 <span class="sr-only">(current)</span></a></li>
        <li><a href="info.html">前端资讯</a></li>
        <li><a href="course.html">课程选择</a></li>
        <li class="active"><a href="progress.html">课程易学度</a></li>
        <li><a href="login.html">注册</a></li>
        <li><a href="logon.html">登录</a></li>
      </ul>  
      <ul class="nav navbar-nav navbar-right">
        <li><a href="about.html">关于我们</a></li>      
      </ul>
    </div>
  </div>
</nav>
</div>
<div class="container">
  	<div id="carousel-example-generic" class="carousel slide marginTop" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      </ol>
    
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="../image/hdp_01.jpg" alt="图1" width="100%">
        </div>
        <div class="item">
          <img src="../image/hdp_02.jpg" alt="图2" width="100%">
        </div>
      </div>
    
      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">Next</span>
      </a>
	</div>
</div>
<div class="w1140" style="margin-top:30px"> 
<h3>Web<small style="font-size:24px;font-family:宋体">前端技术自学难易度</small></h3>
<h6>通过渐变可以为进度条创建条纹效果</h6>
<hr/>
    <h4>PC端网站重构</h4>
    <div class="progress">
      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:20%">
        <span class="sr-only">40% Complete (success)</span>
      </div>
    </div>
    <h4>移动端网站重构</h4>
    <div class="progress">
      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
        <span class="sr-only">40% Complete (success)</span>
      </div>
    </div>
    <h4>JavaScript</h4>
    <div class="progress">
      <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:70%">
        <span class="sr-only">40% Complete (success)</span>
      </div>
    </div>
    <h4>JQurey</h4>
    <div class="progress">
      <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:50%">
        <span class="sr-only">40% Complete (success)</span>
      </div>
    </div>
    <h4>Bootstrop</h4>
    <div class="progress">
      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:30%">
        <span class="sr-only">40% Complete (success)</span>
      </div>
    </div>
    <h4>Angular</h4>
    <div class="progress">
      <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:70%">
        <span class="sr-only">40% Complete (success)</span>
      </div>
    </div>
    <h4>H5高级课程</h4>
    <div class="progress">
      <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:90%">
        <span class="sr-only">40% Complete (success)</span>
      </div>
    </div>
</div>
<table class="table table-bordered  w1140" style="margin-top:20px">
    <tr style="background:#f5f5f5;color:#000">
      <td>Copyright©1999-2017 北京中公教育科技股份有限公司 .All Rights Reserved 京ICP备10218183号-88 京ICP证161188号</td>
    </tr>
</table>
</body>
</html>
